<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>css特殊选择器</title>
    <style>
        /* 伪类选择器 */
        /* li:first-child {
            color: red;
        }
        li:last-child {
            color: blue;
        }
        li:nth-child(3) {
            color: green;
        } */
        /* li:nth-child(2n) {
            color: aqua;
        }
        li:nth-child(2n+1) {
            color: brown;
        }  */
        li:not(:nth-child(3)) {
            color: pink;
        }
        a:link {
            color: red;
        }
        a:visited{
            color: green;
        }
        a:hover{
            color: aqua;
        }
        a:active{
            color: yellow;
        }

        /* 伪元素选择器 */
        .text::first-letter{
            color: red;
        }
        .text::first-line{
            color: blue;
        }
        .text::selection{
            color: green;
        }
        .text::before{
            content: "在开始之前，";
        }
        .text::after{
            content: "到这里就结束了！";
        }


        .text2::first-letter{
            color: red;
        }
        .text2::first-line{
            color: blue;
        }

        /* 生效 */
        .text2::selection{
            color: green;
        }
        .text2::before{
            content: "在开始之前，";
        }
        .text2::after{
            content: "到这里就结束了！";
        }

        /* 注意：::first-letter、::first-line只对块级元素生效 */
    </style>
</head>
<body>
    <!-- 伪类选择器 -->
    <ul>
        <li>前端</li>
        <li>后端</li>
        <li>测试</li>
        <li>大数据</li>
        <li>后端</li>
        <li>硬件</li>

        <a href="https://www.baidu.com/">百度一下</a>
    </ul>

    <!-- 伪元素选择器 -->
    <div class="text">
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Quibusdam, est excepturi? Fuga labore cupiditate possimus dolor perferendis voluptatum distinctio quisquam at, voluptas, eligendi laudantium vero quia earum quis soluta quod? Nihil, inventore, nobis sequi odit minus necessitatibus, quo corrupti commodi obcaecati facere at est. Molestiae reprehenderit similique inventore ullam voluptate ipsum delectus itaque aperiam. Dolorem explicabo voluptatum quis architecto cupiditate mollitia molestias labore, itaque facere ipsum ad cumque porro rem aliquam odio assumenda consectetur error cum aperiam inventore ratione id! Corrupti cum, maiores aut laudantium accusamus fugit magnam neque quibusdam error reiciendis animi repellendus modi quos, quisquam ipsa qui id laboriosam perferendis unde eligendi quaerat libero quo! Et ea eos vel? Tenetur nam dignissimos sunt quidem, facere aspernatur minima dolor consequuntur possimus nemo! Molestias, blanditiis explicabo modi commodi sit consequatur dolorum omnis enim temporibus necessitatibus ab doloremque qui, quod distinctio illo recusandae. Vero sunt, aperiam sed itaque est laboriosam quam suscipit reprehenderit eius facere unde temporibus incidunt ex quas dignissimos delectus? Ducimus cupiditate, voluptatibus fugiat dolorum corporis eaque neque odio blanditiis ad doloribus repellat. Temporibus fugit, et odio modi doloribus optio aliquid aliquam officiis quo adipisci nemo consequuntur eum veniam. Nulla quasi, unde nam sunt at animi ipsa autem deleniti.
    </div>
    <br>
    <span class="text2">
        Lorem ipsum, dolor sit amet consectetur adipisicing elit. Deleniti qui incidunt numquam tempora perferendis pariatur assumenda quaerat laboriosam commodi impedit adipisci provident nemo distinctio reprehenderit delectus veniam optio quis fugiat inventore dignissimos esse, ipsum iste! Corrupti quo quis amet saepe eius quidem quia est obcaecati ex quasi vitae deserunt recusandae itaque autem repudiandae corporis minus illo cupiditate error accusantium unde, repellat deleniti laudantium quae! Voluptate, sunt perferendis cum distinctio rem nihil delectus veritatis ullam molestiae aliquam similique placeat reiciendis qui nemo, natus eligendi iusto beatae harum, culpa quam. Maxime sed culpa quia, sequi quaerat quam consequuntur vitae! Error exercitationem ratione ex nostrum eos, minus hic facere maxime! Possimus minus ullam accusamus et officiis nam quod sequi autem temporibus. Cumque consectetur id eius optio deleniti ipsum molestiae quam, consequatur sequi recusandae dicta blanditiis repudiandae nisi pariatur, et odio veritatis? Quia nulla magnam veniam blanditiis optio exercitationem quas molestias, sapiente impedit eligendi, tempora cum vero sunt iure? Tenetur rem fuga voluptatem, vitae voluptates asperiores omnis et, officia natus debitis repudiandae porro. Ducimus repellat necessitatibus, voluptate cumque tenetur quo illo nostrum itaque ipsum id libero debitis aperiam doloribus minus ut excepturi, officia distinctio. Laborum nemo, rerum provident consequuntur alias accusamus quod deserunt error.
    </span>
</body>
</html>